<template>
  <div>
    <card v-if="$store.state.superAdmin == 'true'" style="margin-bottom: 10px">
      <el-select
        style="width: 100%"
        v-model="museumId"
        @change="change"
        filterable
        placeholder="请选择博物馆"
      >
        <el-option
          v-for="item in museumList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        >
        </el-option>
      </el-select>
    </card>
    <card>
      <div class="flexCSB">
        <div class="flexzbc">
          <div>
            <DatePicker
              :clearable="clearable"
              format="yyyy-MM-dd"
              type="daterange"
              placeholder="请选择起止时间"
              style="width: 300px"
              :value="time"
              @on-change="onChange"
            ></DatePicker>
          </div>
          <div class="flexzbcop" :style="{display:'flex'}">
            <el-select
              style="width: 100%"
              v-model="valueee"
              @change="onChanged"
              clearable
              placeholder="选择预约到馆时间段"
            >
              <el-option
                v-for="item in timelist"
                :key="item.id"
                :label="item.timeRange"
                :value="item.timeRange"
              >
              </el-option>
            </el-select>
            <!-- <el-select
              style="width: 100%;margin-left:10px;"
              popper-class="select"
              v-model="queryType"
              @change="onChanged1"
              clearable
              placeholder="选择类型"
            >
              <el-option
                v-for="item in type"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <el-input clearable @input="input" style="width: 100%;margin-left:10px" v-model="condition" placeholder="请输入号码"></el-input> -->
            <el-input clearable style="width: 100%;margin-left:10px" placeholder="请输入号码" @input="input" v-model="condition" class="input-with-select">
              <el-select clearable style="width: 90px;" v-model="queryType" slot="prepend" placeholder="请选择">
                <el-option v-for="item in type"
                :key="item.value"
                :label="item.label"
                :value="item.value"></el-option>
              </el-select>
            </el-input>
          </div>
        </div>

        <div>
          <Button
            type="primary"
            @click="openModal"
            :loading="loading1"
            style="margin-left: 10px"
            >导出预约人员名单</Button
          >
          <!-- <Button
            type="info"
            @click="shoudongluru"
            :loading="loading1"
            style="margin-left: 10px"
            >手动录入团队订单</Button -->
          <!-- > -->
        </div>
      </div>
      <div class="flexCSB" style="margin-top: 10px">
        <div>
          <RadioGroup v-model="states" type="button" @on-change="change2">
            <Radio label="0">全部</Radio>
            <Radio label="1">待使用</Radio>
            <Radio label="2">已使用</Radio>
            <Radio label="3">已取消</Radio>
            <Radio label="4">已过期</Radio>
            <Radio label="5">未审核</Radio>
          </RadioGroup>
          <RadioGroup v-model="isTeamBook" type="button" @on-change="change3">
            <Radio :label="false">个人预约</Radio>
            <Radio :label="true">团队预约</Radio>
          </RadioGroup>
        </div>
      </div>
      <Table
        class="table"
        :loading="loading1"
        highlight-row
        :columns="columns"
        :data="data"
      ></Table>
      <Page
      show-total
        class="page"
        :total="total"
        :current.sync="current"
        show-elevator
        @on-change="changePage"
      />
      <Card style="margin-top: 15px">
        <p style="margin-bottom: 5px;margin-top: 5px; color: #ed4014; font-size: 12px">
          该图展示的是个人预约与团队预约一起的总人数
        </p>
        <div
          id="echarts"
          class="echarts"
          :style="{ width: screenWidth - width + 'px' }"
        ></div>
        <p style="margin-top: -30px; color: #ed4014; font-size: 12px">
          需要选择起止时间，方可查询数据
        </p>
      </Card>
      <Modal title="详细信息" v-model="modal" width="70">
        <Spin fix size="large" v-if="loading3"></Spin>
        <Table
          class="table"
          highlight-row
          :columns="column1"
          :data="data2"
        ></Table>
        <div slot="footer">
          <Button type="success" class="Button" v-if="wenjuan_list.length" @click="wenjuan = true"
          >查看问卷</Button
          >
          <Button type="warning" class="Button" @click="modal = false"
            >关闭</Button
          >
        </div>
      </Modal>
      <Modal
        title="安全提示"
        :closable="false"
        fullscreen
        footer-hide="true"
        v-model="alert"
        width="70"
      >
        <div class="titleModal">
          <div class="title">数据资源使用许可与保密协议</div>
          <div class="titleModal1">
            <span style="display: flex"
              >管理方：
              <p style="text-decoration: underline">
                杭州博物文化传播有限公司
              </p></span
            ><span style="display: flex"
              >使用方：
              <p style="text-decoration: underline">
                {{ $store.state.museumName }}
              </p></span
            >
          </div>
          <div>
            为规范数据使用，保证数据应用安全，防止数据泄密，特签订如下协议。
          </div>
          <div class="titleModal2">一、使用方必须遵守以下使用协议：</div>
          <div>
            1、使用方在同意本协议的前提下，导出相关数据的同时，需要操作人员进行手机短信验证。
          </div>
          <div>
            2、使用方必须在使用数据所形成的成果的显著位置注明该数据“保密”字样。
          </div>
          <div>
            3、使用方对许可使用的数据不拥有复制、传播、出版、翻译成外国语言等权利，不得以商业目的使用该数据或者开发和生产产品。数据的任何格式或者任何复制品视同原始数据。使方可根据需要对数据内容进行必要的修改和对数据格式进行转换，但未经管理方许可不得将修改、转换后的数据对外发布和提供，并须将修改、转换的情况及修改、转换的内容向管理方备案。不得使用数据从事危害国家安全、社会公共利益和他人合法权益的活动。
          </div>
          <div>
            4、若使用方违反本协议规定，管理方有权责令使用方停止使用共享数据并归还管理方，且将该数据及其衍生品、所形成的成果全部删除。
          </div>
          <div>
            5、在数据使用期限内，管理方有权对使用方数据成果使用情况、数据存储设备管理情况、数据保密管理情况进行检查。如发现存在严重泄密倾向，将有权责令使用方停止使用共享数据，归还数据，将该数据及其衍生品、所形成的成果全部删除。
          </div>
          <div class="titleModal2">二、使用方必须遵守以下保密协议</div>
          <div>
            1、使用方必须按国家有关保密法律法规的要求，釆取有效的保密措施，确保资料安全，严防丢失泄密。
          </div>
          <div>
            2、使用方数据仅限用于申请使用的范園，不得挪作他用。如有其他行为涉及数据内容必须与管理方沟通并征得管理方同意后，使用方方可使用。使用方在本单位内须严格数据管理，控制数据知悉范围，建立专人负责制度，建立数据领用记录，责任到人。
          </div>
          <div>
            3、使用方必须设置数据专用计算机，专人负责，专机专用。禁止通过网络传输数据信息。不得将数据或衍生成果在互联网上登载。
          </div>
          <div class="titleModal2">三、违约责任</div>
          <div>
            1、使用方如有违反有关保密规定的，依照《中华人民共和国保密法》、《中华人民共和国测绘成果管理规定》等有关法律法规的规定依法处理。
          </div>
          <div>
            2、使用方违反本协议规定約，管理方有权对因此造成的损失要求赔偿；构成犯罪的，由司法机关追究其刑事责任。
          </div>
          <div>
            3、因使用方使用或保管数据不当，导致失密事件，由使用方负全部法律责任。
          </div>
          <div>
            4、本协议履行期间如产生争议，应协商解决；协商不成的，可向管理方住所地人民法院提起诉讼。
          </div>
          <div class="titleModal3">
            {{ time2[0] }}年{{ time2[1] }}月{{ time2[2] }}日
          </div>
        </div>
        <div
          style="
            width: 100%;
            display: flex;
            justify-content: center;
            margin-top: 20px;
          "
        >
          <Button
            type="info"
            @click="alertCancel"
            style="width: 150px; margin-right: 50px"
            >取消</Button
          >
          <Button type="primary" style="width: 150px" disabled v-if="dumiao"
            >{{ sec }}s</Button
          >
          <Button type="primary" style="width: 150px" v-else @click="sure"
            >同意</Button
          >
        </div>
      </Modal>
      <Modal
        v-model="phoneModal"
        title="如您已同意上述协议，我们将以短信验证为准！"
      >
        <div
          style="
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
          "
        >
          <Input v-model="phoneText" disabled style="width: 360px" />
          <Button
            type="primary"
            v-if="!sended"
            @click="sendYZM"
            :loading="loading6"
            >发送验证码</Button
          >
          <Button disabled v-else>已发送 {{ miao }}s</Button>
        </div>
        <Input v-model="code" placeholder="请输入接收到的验证码"></Input>
        <div slot="footer">
          <Button
            type="warning"
            class="Button"
            @click="nowDownload"
            :loading="loading5"
            :disabled="code == ''"
            style="width: 100px"
            >导出</Button
          >
        </div>
      </Modal>
      <Modal v-model="shudongModal" title="手动录入团队订单" width="60">
        <Form ref="form" :model="shoudongData" :label-width="170">
          <FormItem label="团队名称">
            <Input
              v-model="shoudongData.teamName"
              placeholder="请输入团队名称"
            ></Input>
          </FormItem>
          <FormItem label="负责人名称">
            <Input
              v-model="shoudongData.teamChargeName"
              placeholder="请输入负责人名称"
            ></Input>
          </FormItem>
          <FormItem label="负责人联系电话">
            <Input
              v-model="shoudongData.teamChargePhone"
              placeholder="请输入负责人联系电话"
            ></Input>
          </FormItem>
          <FormItem label="到馆时间">
            <el-select style="width: 100%" v-model="shoudongData.arrivalTime">
              <el-option
                v-for="item in arrivalPavilions"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </FormItem>
          <FormItem label="预约日期">
            <!-- <Input v-model="shoudongData.reservationDate" placeholder="请输入预约日期"></Input> -->
            <DatePicker
              v-model="shoudongData.reservationDate"
              type="date"
              style="width: 100%"
              placeholder="请选择日期"
            ></DatePicker>
          </FormItem>
          <FormItem label="人数（简易团队预约）">
            <InputNumber
              :min="0"
              style="width: 100%"
              v-model="shoudongData.amount"
              placeholder="请输入人数"
            ></InputNumber>
          </FormItem>
          <FormItem label="是否需要讲解">
            <i-switch v-model="shoudongData.hasCommentDemand" size="large">
              <span slot="open">需要</span>
              <span slot="close">不需要</span>
            </i-switch>
          </FormItem>
          <FormItem label="状态">
            <RadioGroup v-model="shoudongData.states" type="button">
              <Radio :label="1">待核销</Radio>
              <Radio :label="2">已核销</Radio>
            </RadioGroup>
          </FormItem>
        </Form>
        <div slot="footer">
          <div class="buttonDiv">
            <Upload
              :before-upload="shoudongSubmit2"
              :headers="headers"
              :data="UploadData"
              action="https://museum-voice.bowu66.com/stage/reservation/manualImportBookOrder"
            >
              <Button @click="shoudongSubmit2" type="info"
                >上传参观人员表格并提交</Button
              >
            </Upload>
            <Button
              style="margin-left: 10px"
              type="warning"
              class="Button"
              @click="shoudongSubmit"
              :loading="loading7"
              >普通提交</Button
            >
          </div>
        </div>
      </Modal>
      <!--   问卷展示   -->
      <Modal v-model="wenjuan" title="问卷填写情况">
        <div style="margin-bottom: 20px" v-for="(item, i) in wenjuan_list" :key="item.question">
          <div>{{ i + 1 }}. {{ item.question }}</div>
          <div style="color: #1AAD19"><span style="margin-right: 10px">问卷填写:</span> {{ item.answer }}</div>
        </div>
        <div slot="footer">
          <Button type="success" class="Button" @click="wenjuan = false"
          >确定</Button
          >
        </div>
      </Modal>
    </card>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data () {
    return {
      wenjuan: false,
      loading1: false,
      loading2: false,
      loading3: false,
      loading4: false,
      loading5: false,
      loading6: false,
      loading7: false,
      // 存放问卷的数组
      wenjuan_list: [],
      arrivalPavilions: [],
      condition: '',
      valueee: '',
      headers: {},
      timelist: [],
      shudongModal: false,
      shoudongData: {
        amount: 0,
        appMuseumId: '',
        arrivalTime: '',
        hasCommentDemand: true,
        reservationDate: '',
        states: 0,
        teamChargeName: '',
        teamChargePhone: '',
        teamName: ''
      },

      columns: [],
      columns1: [
        {
          title: '昵称',
          key: 'nickName',
          align: 'center',
          minWidth: 110,
          fixed: 'left'
        },
        {
          title: '头像',
          key: 'headImgUrl',
          align: 'center',
          minWidth: 110,
          render: (h, params) => {
            return h('img', {
              style: {
                width: '60px',
                marginTop: '6px',
                'border-radius': '50%'
              },
              attrs: {
                src: params.row.headImgUrl
              }
            })
          }
        },
        {
          title: '预约到馆日期',
          key: 'reservationDate',
          align: 'center',
          minWidth: 110
        },
        {
          title: '预约到馆时间段',
          key: 'arrivalTime',
          align: 'center',
          minWidth: 150
        },
        {
          title: '进馆时间',
          key: 'gmtModified2',
          align: 'center',
          minWidth: 140
        },
        {
          title: '提交预约时间 ',
          key: 'gmtCreate',
          align: 'center',
          minWidth: 180
        },
        { title: '参观人数', key: 'num2', align: 'center', minWidth: 100 },

        {
          title: '预约状态',
          align: 'center',
          minWidth: 160,
          key: 'states2',
          render: (h, params) => {
            let color = ''
            if (params.row.states2 == '待使用') {
              color = 'warning'
            }
            if (params.row.states2 == '已使用') {
              color = 'primary'
            }
            if (params.row.states2 == '已取消') {
              color = 'error'
            }
            if (params.row.states2 == '已过期') {
              color = ''
            }
            if (params.row.states2 == '未审核') {
              color = 'info'
            }
            return h(
              'Tag',
              {
                props: { type: 'dot', color: color }
              },
              params.row.states2
            )
          }
        },

        {
          title: '变更时间 ',
          key: 'gmtModified',
          align: 'center',
          minWidth: 180
        }
        // {title:'openid',key:'openid',align: 'center',minWidth:300},

      ],
      columns2: [
        {
          title: '昵称',
          key: 'nickName',
          align: 'center',
          minWidth: 110,

          fixed: 'left'
        },
        {
          title: '头像',
          key: 'headImgUrl',
          align: 'center',
          minWidth: 110,
          render: (h, params) => {
            return h('img', {
              style: {
                width: '60px',
                marginTop: '6px',
                'border-radius': '50%'
              },
              attrs: {
                src: params.row.headImgUrl
              }
            })
          }
        },
        { title: '团队名称', key: 'teamName', align: 'center', minWidth: 150 },
        {
          title: '预约到馆日期',
          key: 'reservationDate',
          align: 'center',
          minWidth: 150
        },
        {
          title: '预约到馆时间段',
          key: 'arrivalTime',
          align: 'center',
          minWidth: 150
        },
        {
          title: '进馆时间',
          key: 'gmtModified2',
          align: 'center',
          minWidth: 140
        },
        {
          title: '提交预约时间 ',
          key: 'gmtCreate',
          align: 'center',
          minWidth: 180
        },

        { title: '参观人数', key: 'num2', align: 'center', minWidth: 100 },

        {
          title: '预约讲解',
          align: 'center',
          minWidth: 200,
          key: 'hasCommentDemand2',
          render: (h, params) => {
            let color = ''
            if (!params.row.hasCommentDemand) {
              color = 'warning'
            } else {
              color = 'primary'
            }
            return h(
              'Tag',
              {
                props: { type: 'dot', color: color }
              },
              params.row.hasCommentDemand2
            )
          }
        },
        { title: '负责人', key: 'chargeName', align: 'center', minWidth: 100 },
        {
          title: '负责人联系方式',
          key: 'chargePhone',
          align: 'center',
          minWidth: 150
        },
        {
          title: '预约状态',
          align: 'center',
          minWidth: 160,
          key: 'states2',
          render: (h, params) => {
            let color = ''
            if (params.row.states2 == '待使用') {
              color = 'warning'
            }
            if (params.row.states2 == '已使用') {
              color = 'primary'
            }
            if (params.row.states2 == '已取消') {
              color = 'error'
            }
            if (params.row.states2 == '已过期') {
              color = ''
            }
            if (params.row.states2 == '未审核') {
              color = 'info'
            }
            return h(
              'Tag',
              {
                props: { type: 'dot', color: color }
              },
              params.row.states2
            )
          }
        },
        {
          title: '变更时间 ',
          key: 'gmtModified',
          align: 'center',
          minWidth: 180
        },
        // {title:'openid',key:'openid',align: 'center',minWidth:300},
        {
          title: '操作',
          align: 'center',
          fixed: 'right',
          minWidth: 200,
          render: (h, params) => {
            console.log(params)
            if (params.row.states == '5') {
              return h('div', [
                h(
                  'Button',
                  {
                    props: {
                      type: 'primary'
                    },
                    on: {
                      click: () => {
                        this.show(params)
                      }
                    }
                  },
                  '附件'
                ),
                h(
                  'Button',
                  {
                    props: {
                      type: 'success'
                    },
                    style: {
                      marginLeft: '10px'
                    },
                    on: {
                      click: () => {
                        this.detail(params)
                      }
                    }
                  },
                  '查看'
                ),
                h(
                  'Button',
                  {
                    props: {
                      type: 'success'
                    },
                    style: {
                      marginLeft: '10px'
                    },
                    on: {
                      click: () => {
                        this.though(params)
                      }
                    }
                  },
                  '审核'
                )
              ])
            } else {
              return h('div', [
                h(
                  'Button',
                  {
                    props: {
                      type: 'primary'
                    },
                    on: {
                      click: () => {
                        this.show(params)
                      }
                    }
                  },
                  '附件'
                ),
                h(
                  'Button',
                  {
                    props: {
                      type: 'success'
                    },
                    style: {
                      marginLeft: '10px'
                    },
                    on: {
                      click: () => {
                        this.detail(params)
                      }
                    }
                  },
                  '查看'
                )
              ])
            }
          }
        }
      ],
      data: [],
      column2: [
        { title: '名称', key: 'name', align: 'center' },
        { title: '证件号', key: 'cardNum', align: 'center' },
        { title: '证件类型', key: 'certificateType', align: 'center' },
        { title: '手机号', key: 'phone', align: 'center' },
        { title: '户籍地址', key: 'censusAddress', align: 'center' }
      ],
      column3: [
        { title: '名称', key: 'name', align: 'center' },
        { title: '证件号', key: 'cardNum', align: 'center' },
        { title: '证件类型', key: 'certificateType', align: 'center' },
        { title: '学生卡号', key: 'schoolCard', align: 'center' },
        { title: '手机号', key: 'phone', align: 'center' },
        { title: '户籍地址', key: 'censusAddress', align: 'center' }
      ],
      column1: [],
      museumId: '',
      museumList: [],
      type: [
        {
          label: '身份证',
          value: 'card'
        },
        {
          label: '手机号',
          value: 'phone'
        }
      ],
      current: 1,
      size: 10,
      total: 0,
      states: '0',
      isTeamBook: false,
      modal: false,
      data2: [],
      clearable: false,
      time: [],
      screenWidth: document.body.clientWidth,
      width: 350,
      alert: false,
      time2: [],
      phoneModal: false,
      sended: false,
      queryType: '',
      code: '',
      dumiao: true,
      sec: 10,
      setInter: null,
      phoneText: '',
      miao: 60,
      setMiao: null,
      UploadData: {}
    }
  },
  created () {
    let time = this.getTime(new Date())
    let time1 = this.getTime(new Date(new Date().getTime() - (86400000 * 5)))
    this.time = [time1, time]
    console.log(this.$store.state.museumId)
    this.headers = {
      token: localStorage.getItem('token')
    }
    if (this.$store.state.museumId == 8486 || this.$store.state.museumId == '') {
      this.columns1.push({ title: '是否签退', key: 'isSignOut', align: 'center', minWidth: 100 })
      this.columns1.push({
        title: '操作',
        align: 'center',
        fixed: 'right',
        minWidth: 130,
        render: (h, params) => {
          return h('div', [
            h(
              'Button',
              {
                props: {
                  type: 'success'
                },
                on: {
                  click: () => {
                    this.detail(params)
                  }
                }
              },
              '查看'
            ),
            h(
              'Button',
              {
                props: {
                  type: 'success'
                },
                on: {
                  click: () => {
                    this.signout(params)
                  }
                }
              },
              '签退'
            )
          ])
        }
      })
    } else {
      this.columns1.push(
        {
          title: '操作',
          align: 'center',
          fixed: 'right',
          minWidth: 130,
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'success'
                  },
                  on: {
                    click: () => {
                      this.detail(params)
                    }
                  }
                },
                '查看'
              )
            ])
          }
        }
      )
    }
    this.columns = this.columns1

    var date = new Date()
    this.time2 = this.getTime(date).split('-')
    this.time2.push(this.getTime(this.getTime4(7)))
    this.time2.push(this.getTime(this.getTime4(1)))
    if (this.$store.state.superAdmin == 'true') {
      this.getMuseumList()
    } else {
      if (this.$store.state.museums.length > 1) {
        this.museumId = this.$store.state.museumId
      } else {
        this.museumId = ''
      }
      this.getReservationPeopleList()
      this.getReservationMuseumArrivalRangeDropdown()
    }
    console.log(this.museumId)
  },

  mounted () {
    window.onresize = () => {
      return (() => {
        this.screenWidth = document.body.clientWidth
      })()
    }
    console.log(this.museumId)
  },
  watch: {
    screenWidth (val) {
      let that = this
      setTimeout(function () {
        var myChart = that.echarts.init(document.getElementById('echarts'))
        myChart.resize()
      }, 300)
    },
    '$store.state.isCollapse' (val) {
      if (val) {
        this.width = 170
      } else {
        this.width = 350
      }
      let that = this
      setTimeout(function () {
        var myChart = that.echarts.init(document.getElementById('echarts'))
        myChart.resize()
      }, 300)
    }
  },
  methods: {
    getReservationMuseumArrivalRangeDropdown () {
      this.$http(
        '/stage/reservation/getReservationMuseumArrivalRangeDropdown',
        {
          museumId: this.museumId
        },
        'get',
        (res) => {
          console.log(res.data.data)
          this.timelist = res.data.data
          console.log(this.timelist)
        }
      )
    },

    shoudongluru () {
      this.shoudongData = {
        amount: 0,
        appMuseumId: this.museumId,
        arrivalTime: '',
        hasCommentDemand: true,
        reservationDate: '',
        states: 0,
        teamChargeName: '',
        teamChargePhone: '',
        teamName: ''
      }
      this.getTimeRangeList()
      this.shudongModal = true
    },
    shoudongSubmit () {
      console.log(this.shoudongData)
      for (let i in this.shoudongData) {
        if (i != 'hasCommentDemand' && i != 'states' && i != 'amount') {
          if (!this.shoudongData[i]) {
            this.$Message.error('表单需填写完毕')
            return false
          }
        }
      }
      this.loading7 = true
      this.$http(
        '/stage/reservation/manualImportBookOrder',
        {
          amount: this.shoudongData.amount,
          appMuseumId: this.museumId,
          arrivalTime: this.shoudongData.arrivalTime,
          hasCommentDemand: this.shoudongData.hasCommentDemand,
          reservationDate: this.getTime(this.shoudongData.reservationDate),
          states: this.shoudongData.states,
          teamChargeName: this.shoudongData.teamChargeName,
          teamChargePhone: this.shoudongData.teamChargePhone,
          teamName: this.shoudongData.teamName
        },
        'post',
        (res) => {
          if (res.data.code == 200) {
            this.$Message.success('提交成功')
            this.shudongModal = false
          } else {
            this.$Message.error(res.data.msg)
          }
          this.loading7 = false
        }
      )
    },
    sure () {
      this.phoneModal = true
      this.miao = 60
      clearInterval(this.setMiao)
      this.sended = false
    },
    openModal () {
      if (this.time.length == 0) {
        this.$Message.error('起止时间需要选择')
        return false
      }
      this.alert = true
      this.sec = 10
      let that = this
      this.setInter = setInterval(function () {
        if (that.sec == 0) {
          that.sec = 10
          that.dumiao = false
          clearInterval(that.setInter)
        } else {
          that.sec--
        }
      }, 1000)
    },
    alertCancel () {
      this.sec = 10
      clearInterval(this.setInter)
      this.alert = false
    },
    getMuseumList () {
      this.loading1 = true
      this.$http('/stage/museum/getAppMuseumDropDown', {}, 'post', (res) => {
        if (res.data.code == 200) {
          this.museumList = res.data.data
          for (let i = 0; i < this.museumList.length; i++) {
            if (this.museumList[i].name.length > 20) {
              this.museumList[i].name =
                this.museumList[i].name.slice(0, 20) + '...'
            }
          }
          this.museumId = this.museumList[0].id
          this.getReservationPeopleList()
          this.getReservationMuseumArrivalRangeDropdown()
          this.$http('/stage/excel/getUserPhone', {}, 'get', (res) => {
            if (res.data.code == 200) {
              this.phoneText = res.data.data
            } else {
              this.$Message.error(res.data.msg)
            }
          })
        } else {
          this.$Message.error(res.data.msg)
        }
      })
    },
    show (params) {
      console.log(params)
      console.log(this.prefix)
      // console.log(params.row.excelFile.split('.'));
      if (params.row.excelFile) {
        let length = (params.row.excelFile.split('.')).length
        if (params.row.excelFile.split('.')[length - 1] == 'doc' || params.row.excelFile.split('.')[length - 1] == 'docx' || params.row.excelFile.split('.')[length - 1] == 'xlsx' || params.row.excelFile.split('.')[length - 1] == 'xls') {
          window.open('https://view.officeapps.live.com/op/view.aspx?src=' + this.prefix + params.row.excelFile)
        } else {
          window.open(this.prefix + params.row.excelFile, '_blank')
        }
      } else {
        window.open(this.prefix + params.row.excelFile, '_blank')
      }
    },
    though(params){
      console.log(params);
      this.$confirm("此操作将是否通过审核该团队预约, 是否继续?", "提示", {
        confirmButtonText: "通过",
        cancelButtonText: "拒绝",
        showClose: true,
        closeOnClickModal:false,
        distinguishCancelAndClose:true,
        type: "warning",
      })
        .then(() => {
          this.$http(
            "stage/reservation/authAloneTeamAppointment",
            {
              bookId: params.row.id,
              states: '1',
            },
            "post",
            (res) => {
              if (res.data.code == 200) {
                this.$Message.success("审核通过");
                this.getReservationPeopleList();
              } else {
                this.errorMessage(res.data.msg);
              }
            }
          );
        })
        .catch((action) => {
         if(action==="cancel"){
           this.$http(
            "stage/reservation/authAloneTeamAppointment",
            {
              bookId: params.row.id,
              states: '3',
            },
            "post",
            (res) => {
              if (res.data.code == 200) {
                this.$Message.success("审核未通过");
                this.getReservationPeopleList();
              } else {
                this.errorMessage(res.data.msg);
              }
            }
          )
         }
        });
    },
    getPeriodNum () {
      this.loading4 = true

      let start = '',
        end = ''

      if (this.time[0] != '' && this.time[1] != '') {
        start = this.time[0]
        end = this.time[1]
      }
      this.$http(
        '/stage/reservation/getPeriodNum',
        {
          end: end == undefined ? '' : end,
          museumId: this.museumId,
          start: start == undefined ? '' : start,
          sessionTime: this.valueee == undefined ? '' : this.valueee
        },
        'post',
        (res) => {
          if (res.data.code == 200) {
            let data = ['待使用', '已使用', '已取消', '已过期', '未审核'],
              num = [],
              p = null,
              arr = [
                {
                  peopleNum: 0,
                  states: 1
                },
                {
                  peopleNum: 0,
                  states: 2
                },
                {
                  peopleNum: 0,
                  states: 3
                },
                {
                  peopleNum: 0,
                  states: 4
                },
                {
                  peopleNum: 0,
                  states: 5
                }
              ]
            for (let i = 0; i < res.data.data.length; i++) {
              for (let j = 0; j < arr.length; j++) {
                if (res.data.data[i].states == arr[j].states) {
                  arr[j].peopleNum = res.data.data[i].peopleNum
                }
              }
            }
            for (let i = 0; i < arr.length; i++) {
              if (arr[i].states == 1) {
                num.push({
                  value: arr[i].peopleNum,
                  name: '待使用'
                })
                p = p + arr[i].peopleNum
                continue
              }
              if (arr[i].states == 2) {
                num.push({
                  value: arr[i].peopleNum,
                  name: '已使用'
                })
                p = p + arr[i].peopleNum
                continue
              }
              if (arr[i].states == 3) {
                num.push({
                  value: arr[i].peopleNum,
                  name: '已取消'
                })
                p = p + arr[i].peopleNum
                continue
              }
              if (arr[i].states == 4) {
                num.push({
                  value: arr[i].peopleNum,
                  name: '已过期'
                })
                p = p + arr[i].peopleNum
                continue
              }
              if (arr[i].states == 5) {
                num.push({
                  value: arr[i].peopleNum,
                  name: '未审核'
                })
                p = p + arr[i].peopleNum + '人'
                continue
              }
            }
            let dom = document.getElementById('echarts')
            let myChart = this.echarts.init(dom)
            console.log(data)
            myChart.setOption({
              color: ['#44C9A8', '#3DEA21', '#FFC000', '#FF4646','pink'],
              legend: {
                orient: 'vertical',
                left: 0,
                data: data
              },
              label: {
                formatter: function (e) {
                  return e.name + '：' + e.value + '人 (' + e.percent + ' %)'
                }
              },
              toolbox: {
                show: true,
                feature: {
                  saveAsImage: { show: true }
                }
              },
              graphic: [{　　　　　　　　　　　　　　// 环形图中间添加文字
                type: 'text',　　　　　　　　　　　// 通过不同top值可以设置上下显示
                left: 'center',
                top: '45%',
                style: {
                  text: p,
                  textAlign: 'center',
                  fill: '#000',　　　　　　　// 文字的颜色
                  width: 30,
                  // height: 30,
                  fontSize: 18,
                  color: '#4d4f5c',
                  fontFamily: 'Microsoft YaHei'
                }
              }, {
                type: 'text',
                left: 'center',
                top: '55%',
                style: {
                  text: '总预约人数',
                  textAlign: 'center',
                  fill: '#000',
                  width: 30,
                  // height: 30,
                  fontSize: 18
                }
              }],
              series: [
                {
                  type: 'pie',
                  radius: ['50%', '70%'],
                  center: ['50%', '50%'],
                  data: num,
                  emphasis: {
                    itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                  }
                }
              ]
            })
          } else {
            this.$Message.error(res.data.msg)
          }
        }
      )
    },
    onChange (data) {
      this.time = data
      this.current = 1
      this.getReservationPeopleList()
      this.getReservationMuseumArrivalRangeDropdown()
    },
    input (data) {
      this.condition = data
      this.getReservationPeopleList()
      this.getReservationMuseumArrivalRangeDropdown()
    },
    onChanged (data) {
      this.valueee = data
      console.log(data)
      this.getReservationPeopleList()
      this.getReservationMuseumArrivalRangeDropdown()
    },
    onChanged1 (data) {
      this.queryType = data
      console.log(data)
      this.getReservationPeopleList()
      this.getReservationMuseumArrivalRangeDropdown()
    },
    changePage (data) {
      this.current = data

      this.getReservationPeopleList()
      this.getReservationMuseumArrivalRangeDropdown()
    },
    change () {
      this.current = 1
      this.valueee = ''
      this.getReservationPeopleList()
      this.getReservationMuseumArrivalRangeDropdown()
    },
    getReservationPeopleList () {
      let start = '',
        end = ''
      if (this.time[0] != '' && this.time[1] != '') {
        start = this.time[0]
        end = this.time[1]
      }
      this.loading1 = true
      this.$http(
        '/stage/reservation/getReservationPeopleList',
        {
          appMuseumId: this.museumId,
          current: this.current,
          end: end == undefined ? '' : end,
          start: start == undefined ? '' : start,
          size: this.size,
          states: this.states,
          isTeamBook: this.isTeamBook,
          timeRange: this.valueee,
          queryType: this.queryType,
          condition: this.condition
        },
        'post',
        (res) => {
          if (res.data.code == 200) {
            this.$http('/stage/excel/getUserPhone', {}, 'get', (res) => {
              if (res.data.code == 200) {
                this.phoneText = res.data.data
              } else {
                this.$Message.error(res.data.msg)
              }
            })
            this.data = res.data.data.records
            this.total = res.data.data.total
            for (let i = 0; i < this.data.length; i++) {
              if (this.data[i].isSignOut == true) {
                this.data[i].isSignOut = '已签退'
              } else {
                this.data[i].isSignOut = '未签退'
              }
            }

            for (let i = 0; i < this.data.length; i++) {
              if (this.data[i].states == 1) {
                this.data[i].states2 = '待使用'
                this.data[i].gmtModified2 = ' - '
              }
              if (this.data[i].states == 2) {
                this.data[i].states2 = '已使用'
                this.data[i].gmtModified2 = this.data[i].gmtModified
              }
              if (this.data[i].states == 3) {
                this.data[i].states2 = '已取消'
                this.data[i].gmtModified2 = ' - '
              }
              if (this.data[i].states == 4) {
                this.data[i].states2 = '已过期'
                this.data[i].gmtModified2 = ' - '
              }
              if (this.data[i].states == 5) {
                this.data[i].states2 = '未审核'
                this.data[i].gmtModified2 = ' - '
              }

              if (this.data[i].hasCommentDemand) {
                this.data[i].hasCommentDemand2 = '需要'
              } else {
                this.data[i].hasCommentDemand2 = '不需要'
              }

              this.data[i].num2 = this.data[i].num + ' 人'
            }
            this.getPeriodNum()
          } else {
            this.$Message.error(res.data.msg)
          }
          this.loading1 = false
        }
      )
    },
    detail (params) {
      this.loading3 = true;
      this.$http(
        '/stage/reservation/getSpecificReservationPeople',
        {
          id: params.row.id
        },
        'get',
        (res) => {
          if (res.data.code == 200) {
            if (this.museumId == '4075') {
              this.column1 = this.column3
            } else {
              this.column1 = this.column2
            }
            this.modal = true
            this.data2 = res.data.data
          } else {
            this.$Message.error(res.data.msg)
          }
          // 获取问卷
          this.$http('/stage/museumSubject/getSubjectAnswer', { reservationPeopleId: params.row.id }, 'get', (res) => {
            this.loading3 = false;
            this.wenjuan_list = res.data.data;
            console.log(res.data.data)
          });

        }
      )
    },
    signout (params) {
      console.log(params.row)
      this.$http(
        '/stage/reservation/signOut',
        {
          id: params.row.id
        },
        'get',
        (res) => {
          console.log(res)
          if (res.data.code == '200') {
            this.$message({
              message: '签退成功',
              type: 'success'
            })
            this.getReservationPeopleList()
            this.getReservationMuseumArrivalRangeDropdown()
          } else {
            this.$message.error(res.data.msg)
          }
        }
      )
    },
    // 验证模块
    nowDownload () {
      if (this.code == '') {
        this.$Message.error('请输入验证码')
        return false
      }
      this.loading5 = true
      let data = {
        start: this.time[0],
        end: this.time[1],
        museumId: this.museumId,
        states: this.states,
        code: this.code,
        isTeamBook: this.isTeamBook
      }
      let that = this
      that.axios()
      return false
      axios({
        headers: {
          'Content-Type': 'application/json;charset=UTF-8',
          token: this.$store.state.token || localStorage.getItem('token') || ''
        },
        method: 'post',
        baseURL: that.baseUrl,
        url: '/stage/excel/exportReservationPeopleExcel',
        data: JSON.stringify(data)
      })
        .then((res) => {
          that.loading5 = false
          that.$Message.error(res.data.msg)
        })
        .catch((error) => {
          that.axios()
        })
    },
    axios () {
      let that = this
      axios({
        method: 'post',
        url: this.baseUrl + '/stage/excel/exportReservationPeopleExcel',
        headers: {
          token: this.$store.state.token || localStorage.getItem('token') || '',
          'Content-Type': 'application/json;charset=UTF-8'
        },
        responseType: 'blob',
        data: {
          start: this.time[0],
          end: this.time[1],
          museumId: this.museumId,
          states: this.states,
          code: this.code,
          isTeamBook: this.isTeamBook
        }
      })
        .then(function (res) {
          that.loading5 = false
          // let fileName = decodeURI(response.headers['content-disposition'].split("=")[1]);
          var data = res.data
          var downloadElement = document.createElement('a')
          var href = window.URL.createObjectURL(data) // 创建下载的链接
          downloadElement.href = href
          downloadElement.download = decodeURI(
            res.headers['content-disposition'].split('filename=')[1]
          )
          document.body.appendChild(downloadElement)
          downloadElement.click() // 点击下载
          document.body.removeChild(downloadElement) // 下载完成移除元素
          window.URL.revokeObjectURL(href) // 释放掉blob对象
          that.alert = false
          that.phoneModal = false
        })
        .catch((resp) => {
          that.loading5 = false
          that.$Message.error('下载失败')
        })
    },
    change2 () {
      this.current = 1
      this.getReservationPeopleList()
      this.getReservationMuseumArrivalRangeDropdown()
    },
    sendYZM () {
      this.loading6 = true
      this.$http('/stage/user/getCurrentUserPhoneCaptcha', {}, 'get', (res) => {
        if (res.data.code == 200) {
          this.sended = true
          this.$Message.success('验证码已发送，请注意查收')
          this.miao = 60
          let that = this
          this.setMiao = setInterval(function () {
            if (that.miao == 0) {
              that.miao = 60
              clearInterval(that.setMiao)
              that.sended = false
            } else {
              that.miao--
            }
          }, 1000)
        } else {
          this.$Message.error(res.data.msg)
        }
        this.loading6 = false
      })
    },
    change3 () {
      if (this.isTeamBook) {
        this.columns = this.columns2
      } else {
        this.columns = this.columns1
      }
      this.current = 1
      this.getReservationPeopleList()
      this.getReservationMuseumArrivalRangeDropdown()
    },
    getTimeRangeList () {
      this.$http(
        '/stage/reservation/getReservationConfig',
        {
          museumId: this.museumId
        },
        'get',
        (res) => {
          if (res.data.code == 200) {
            this.arrivalPavilions = res.data.data.arrivalPavilions
          } else {
            this.$Message.error(res.data.msg)
          }
        }
      )
    },
    shoudongSubmit2 () {
      // return true
      for (let i in this.shoudongData) {
        if (i != 'hasCommentDemand' && i != 'states' && i != 'amount') {
          if (!this.shoudongData[i]) {
            this.$Message.error('表单需填写完毕')
            return false
          }
        }
      }
      this.UploadData = {
        amount: this.shoudongData.amount,
        appMuseumId: this.museumId,
        arrivalTime: this.shoudongData.arrivalTime,
        hasCommentDemand: this.shoudongData.hasCommentDemand,
        reservationDate: this.getTime(this.shoudongData.reservationDate),
        states: this.shoudongData.states,
        teamChargeName: this.shoudongData.teamChargeName,
        teamChargePhone: this.shoudongData.teamChargePhone,
        teamName: this.shoudongData.teamName
      }
      console.log(this.UploadData)
    }
  }
}
</script>

<style scoped>
.echarts {
  height: 300px;
}
.titleModal {
  width: 800px;
  position: relative;
  left: 50%;
  margin-left: -400px;
}
.title {
  text-align: center;
  line-height: 50px;
  font-weight: bold;
  font-size: 20px;
}
.titleModal1 {
  display: flex;
  justify-content: space-between;
}
.titleModal2 {
  font-weight: bold;
  margin-top: 10px;
}
.titleModal3 {
  text-align: right;
  margin-top: 10px;
}
.buttonDiv {
  display: flex;
  justify-content: flex-end;
}
.flexzbc {
  display: flex;
}
.flexzbcop {
  margin-left: 30px;

}
</style>
